const newArr = {
    id: "4001874",
    name: "圆润大肚流线型耐热玻璃凉水壶",
    price: "79.00",
    picture:
        "https://yanxuan-item.nosdn.127.net/235326170a18f9b220a10928208336c5.png",
    desc: "1.25L容量，耐热耐冷，通透好用",
    spec: {
        specAll: "https://yanxuan-item.nosdn.127.net/d5a218ff74dfaec0bcb7f8f21f80faac.png",
        titleFir: "水杯",
    },
}
const arr = []
arr.push(newArr)
arr.forEach(e => {
    document.querySelector('.middle img').src = `${e.picture}`
    document.querySelector('.name').innerHTML = `${e.name}`
    document.querySelector('.desc').innerHTML = `${e.desc}`
    document.querySelector('.now').innerHTML = `${e.price}`
    document.querySelector('.dd>img:nth-child(1)').title = `${e.spec.titleFir}`
    document.querySelector('.dd>img:nth-child(1)').src = `${e.spec.specAll}`
})

let mesArr = JSON.parse(localStorage.getItem('mes')) || []
// 数据的存储
function render() {
    let mes = {}
    let goodsName = document.querySelector('.xtx_product_info>.right h3').innerHTML
    let goodsPrice = document.querySelector('.now').innerHTML
    let goodsPicture = document.querySelector('.middle img').src
    let specFir = document.querySelector('.dd>img:nth-child(1)').src
    let titleFir = document.querySelector('.dd>img:nth-child(1)').title
    let goodsCount = +document.querySelector('input[name="count"]').value
    mes = { id: 2, goodsName, goodsPrice, goodsPicture, specFir, titleFir, goodsCount, titleFir, checked: false, }
    mesArr.push(mes)
    localStorage.setItem("mes", JSON.stringify(mesArr))
}



// 规格的点击
const specsColor = document.querySelector('.attrs>.item:nth-child(1)>.dd')
specsColor.addEventListener('click', function (e) {
    if (e.target.tagName === 'IMG') {
        document.querySelector('.attrs>.item>.dd>img.active').classList.remove('active')
        e.target.classList.add('active')
    }
})
const specsSize = document.querySelector('.attrs>.item:nth-child(2)>.dd')
specsSize.addEventListener('click', function (e) {
    if (e.target.tagName === 'SPAN') {
        document.querySelector('.attrs>.item>.dd>span.active').classList.remove('active')
        e.target.classList.add('active')
    }
})
//数量的加减
const reduce = document.querySelector('.attrs .item>.dd>.num a:nth-of-type(1)')
const increase = document.querySelector('.attrs .item>.dd>.num a:nth-of-type(2)')
const sum = document.querySelector('.attrs .item>.dd>.num input')
let flag = true
increase.addEventListener('click', function () {
    if (flag) {
        sum.value++
        if (sum.value > 1) {
            increase.style.color = '#000'
        }
        // let newNum = +document.querySelector('input[name="count"]').value
        // localStorage.setItem("newNum",newNum)
    }
})
reduce.addEventListener('click', function () {
    if (flag) {
        sum.value--
        if (sum.value <= 1) {
            flag = false
            sum.value = 1
            reduce.style.color = '#ccc'
        }
        flag = true
    }
})

//加入购物车的判断，如果没有选择规格，就弹窗提醒“请选择完整规格”,否则提示“加入购物车成功”

const btn = document.querySelector('.attrs .item:last-child a')
btn.addEventListener('click', function () {
    const load = document.querySelector('.load a')
    if(load.innerHTML === '请先登录'){
        alert('请先登录')
        return
    }else{
        alert('加入购物车成功')
        render()    
    }
})

//配送地址
//获取下拉框
let province = document.getElementById("pro");
let city = document.getElementById("city");
let area = document.getElementById("area");
let frag = document.createDocumentFragment();
//循环遍历地址
for (let i = 0; i < data.length; i++) {
    let option = document.createElement("option");
    option.innerHTML = data[i].name;
    option.value = data[i].code;
    frag.appendChild(option);
}
//省级数据添加到下拉框
province.appendChild(frag);
//存放市的数据
let cityArr = []
//省的数据变化触发该事件
province.addEventListener('change', function () {
    //清空市和区的数据，以防重复
    city.innerHTML = `<option value="">---请选择---</option>`
    area.innerHTML = `<option value="">---请选择---</option>`
    //循环遍历数据，将遍历的数据和当前省份作比较
    for (let i = 0; i < data.length; i++) {
        if (data[i].code == this.value) {
            cityArr = data[i].children;
            break;
        }
    }
    //遍历市级数据
    for (let j = 0; j < cityArr.length; j++) {
        let option = document.createElement("option");
        option.innerHTML = cityArr[j].name;
        option.value = cityArr[j].code;
        frag.appendChild(option);
    }
    city.appendChild(frag);
})
//存放区的数据
let areaArr = []
city.addEventListener('change', function () {
    //清除区的数据，以防重复
    area.innerHTML = `<option value="">---请选择---</option>`
    //循环遍历数据，将遍历的数据和当前市级作比较
    for (let i = 0; i < cityArr.length; i++) {
        if (cityArr[i].code == this.value) {
            areaArr = cityArr[i].children;
            break;
        }
    }
    //遍历区级数据
    for (let j = 0; j < areaArr.length; j++) {
        let option = document.createElement("option");
        option.innerHTML = areaArr[j].name;
        option.value = areaArr[j].code;
        frag.appendChild(option);
    }
    area.appendChild(frag);
})

//配送地址的点击
const box = document.querySelector('.box')
box.addEventListener('click', function (e) {
    if (e.target.tagName === 'SELECT') {
        e.target.style.borderColor = '#e4e4e4'
        e.target.style.backgroundColor = '#fff'
    }
})

//放大镜内容
const smallUl = document.querySelector('.small ul')
const middleImg = document.querySelector('.middle img')
const middleDiv = document.querySelector('.middle')
const layerDiv = document.querySelector('.layer')
const largeDiv = document.querySelector('.large')

smallUl.addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'IMG') {
        document.querySelector('.small ul li.active').classList.remove('active')
        e.target.parentNode.classList.add('active')
        // 中间的图片变化
        middleImg.src = e.target.src
        // 大图也需要变化
        largeDiv.style.backgroundImage = `url(${e.target.src})`

    }
})

middleDiv.addEventListener('mouseenter', function () {
    layerDiv.style.display = 'block'
    largeDiv.style.display = 'block'
})
middleDiv.addEventListener('mouseleave', function () {
    layerDiv.style.display = 'none'
    largeDiv.style.display = 'none'
})
middleDiv.addEventListener('mousemove', function (e) {
    // e.offsetX/e.clientX/e.pageX
    // 控制layerDiv的位置
    let targetX = e.pageX - middleDiv.parentNode.offsetLeft - layerDiv.offsetWidth / 2
    // 元素.offsetLeft 距离带定位父元素左沿的距离
    let targetY = e.pageY - middleDiv.parentNode.offsetTop - layerDiv.offsetHeight / 2
    if (targetX < 0) {
        targetX = 0
    }
    if (targetX > middleDiv.offsetWidth - layerDiv.offsetWidth) {
        targetX = middleDiv.offsetWidth - layerDiv.offsetWidth
    }
    if (targetY < 0) {
        targetY = 0
    }
    if (targetY > middleDiv.offsetHeight - layerDiv.offsetHeight) {
        targetY = middleDiv.offsetHeight - layerDiv.offsetHeight
    }
    layerDiv.style.left = `${targetX}px`
    layerDiv.style.top = `${targetY}px`
    largeDiv.style.backgroundPositionX = -targetX * 2 + 'px'
    largeDiv.style.backgroundPositionY = -targetY * 2 + 'px'
})

//商品详情页的tab栏切换
const tabHead = document.querySelector('.tab_head')
const panels = document.querySelectorAll('.tab_pane')
tabHead.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        document.querySelector('.tab_head a.active').classList.remove('active')
        e.target.classList.add('active')
        // 将这个标题对应的内容显示出来, 其他的内容隐藏起来
        // 全部隐藏  干掉所有人, 复活我自己 
        for (let i = 0; i < panels.length; i++) {
            panels[i].style.display = 'none'
        }
        panels[e.target.dataset.index].style.display = 'block'

    }
})

//商品详情页——大家都在说——点击事件
const content = document.querySelector('.judge_tags .content')
content.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        document.querySelector('.judge_tags .content a.active').classList.remove('active')
        e.target.classList.add('active')
    }
})

//商品详情页——排序——点击事件
const sort = document.querySelector('.judge_sort')
sort.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        document.querySelector('.judge_sort a.active').classList.remove('active')
        e.target.classList.add('active')
    }
})


//商品详情页——分页器的点击
const pagination = document.querySelector('.judge_page')
const aALL = document.querySelectorAll('.judge_page>a')
let xia = 1
pagination.addEventListener('click', function (e) {
  if (e.target.dataset.index) {
    document.querySelector('a.ye').classList.remove('ye')
    e.target.classList.add('ye')
  }

  if (e.target.className === 'buttom') {
    document.querySelector('.judge_page>a.ye').classList.remove('ye')
    xia++
    if (xia > aALL.length - 2) {
      xia = 1
    }
    console.log(xia);
    aALL[xia].classList.add('ye')
  }
  if (e.target.className === 'top') {
    // 让高亮的a取消高亮
    document.querySelector('.judge_page>a.ye').classList.remove('ye')
    // 当前点击的a增加高亮
    xia--
    if (xia < 1) {
      xia = 1
    }
    console.log(xia);
    aALL[xia].classList.add('ye')
  }
})


//轮播图
const lis = document.querySelectorAll('.carousel_item')
const prev = document.querySelector('.carousel_prev')
const next = document.querySelector('.carousel_next')
const circle = document.querySelectorAll('.carousel_indicator span')
let index = 0
prev.addEventListener('click', function () {
    index--
    if (index < 0) {
        index = 3
    }
    document.querySelector('.carousel_item.fade').classList.remove('fade')
    lis[index].classList.add('fade')
    document.querySelector('.carousel_indicator span.active').classList.remove('active')
    circle[index].classList.add('active')
})
next.addEventListener('click', function () {
    index++
    if (index > 3) {
        index = 0
    }
    document.querySelector('.carousel_item.fade').classList.remove('fade')
    lis[index].classList.add('fade')
    document.querySelector('.carousel_indicator span.active').classList.remove('active')
    circle[index].classList.add('active')
})

for (let i = 0; i < circle.length; i++) {
    circle[i].addEventListener('click', function () {
        document.querySelector('.carousel_indicator span.active').classList.remove('active')
        circle[i].classList.add('active')
        index = i
        document.querySelector('.carousel_item.fade').classList.remove('fade')
        lis[index].classList.add('fade')
    })
}
 shoppingsss(goodArr)

let username = localStorage.getItem("uname")

const li1 = document.querySelector(".xtx_navs li:nth-child(1)")
const li2 = document.querySelector(".xtx_navs li:nth-child(2)")
if (username) {
    li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${username}</i></a>`
    li2.innerHTML = '<a href="javascript:;">退出登录</a>'
} else {
    li1.innerHTML = '<a href="../html/login.html">请先登录</a>'
    li2.innerHTML = '<a href="../html/register.html">免费注册</a>'
}
// 退出登录
li2.addEventListener("click", function () {
    // 退出登录
    //  删除localStroage的uuu的数据
    localStorage.removeItem("uname")
    location.reload(true)
})